<template>
  <div class="page-header">
    <h1 class="page-title">{{ title }}</h1>
    <div class="page-subtitle">
      <slot name="stats">
        <!-- 默认统计信息槽位 -->
        共 <span class="highlight">{{ itemCount }}</span> {{ itemUnit
        }}<template v-if="secondaryCount > 0"
          >，<span class="highlight">{{ secondaryCount }}</span> {{ secondaryUnit }}</template
        >
      </slot>
    </div>
    <div v-if="description" class="page-desc-wrapper">
      <span class="page-desc">{{ description }}</span>
    </div>
  </div>
</template>

<script setup>
defineProps({
  // 页面标题
  title: {
    type: String,
    required: true,
  },
  // 主要统计数量
  itemCount: {
    type: Number,
    default: 0,
  },
  // 主要统计单位
  itemUnit: {
    type: String,
    default: '条',
  },
  // 次要统计数量
  secondaryCount: {
    type: Number,
    default: 0,
  },
  // 次要统计单位
  secondaryUnit: {
    type: String,
    default: '个',
  },
  // 页面描述
  description: {
    type: String,
    default: '',
  },
})
</script>

<style lang="scss" scoped>
.page-header {
  text-align: center;
  margin-bottom: 2.5rem;
  margin-top: 1rem; /* 减少顶部距离 */

  .page-title {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text-color);
    display: inline-block;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      bottom: -0.5rem;
      left: 50%;
      transform: translateX(-50%);
      width: 3rem;
      height: 0.25rem;
      background: var(--primary-color);
      border-radius: 0.125rem;
    }
  }

  .page-subtitle {
    font-size: 1rem;
    color: var(--text-color-secondary);
    margin: 0.75rem;

    .highlight {
      color: var(--primary-color);
      font-weight: 600;
    }
  }

  .page-desc-wrapper {
    display: inline-block;
    position: relative;
    margin-top: 0.5rem;
    padding: 0 1.5rem;

    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 1.5rem;
      height: 1px;
      background: var(--border-color);
    }

    &::before {
      left: 0;
    }

    &::after {
      right: 0;
    }

    .page-desc {
      font-size: 0.95rem;
      color: var(--text-color-secondary);
      /* 移除斜体样式 */
      letter-spacing: 0.01em;
    }
  }
}

// 响应式调整
@media (max-width: 768px) {
  .page-header {
    margin-bottom: 2rem;
    margin-top: 0.75rem; /* 在小屏幕上减少更多顶部距离 */

    .page-title {
      font-size: 1.75rem;
    }

    .page-subtitle {
      font-size: 0.9rem;
    }

    .page-desc-wrapper {
      padding: 0 1.25rem;

      .page-desc {
        font-size: 0.85rem;
      }
    }
  }
}

@media (max-width: 480px) {
  .page-header {
    margin-top: 0.5rem; /* 在更小的屏幕上进一步减少顶部距离 */

    .page-title {
      font-size: 1.5rem;
    }

    .page-subtitle {
      font-size: 0.875rem;
    }

    .page-desc-wrapper {
      padding: 0 1rem;

      .page-desc {
        font-size: 0.8rem;
      }
    }
  }
}
</style>
